<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ page isELIgnored="false"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta>
<title><c:out value="${pageTitle }">专辑管理-OoM</c:out></title>
	<meta name="keywords" content="个人博客,wjyuian技术站" />
	<meta name="description" content="wjyuian技术站" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="/static/css/base.css" rel="stylesheet" />
	<link href="/static/css/index.css" rel="stylesheet" />
	<link href="/static/css/m.css" rel="stylesheet" />
	<link rel="icon" href="/static/img/logo.ico" type="image/x-icon" />
	
	
    <link href="/static/plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/plugin/jquery.min.js"></script>
    <script src="/static/js/jquery.overblock-1.2.js"></script>
    <!-- 上传图片 -->
    <link href="/static/plugin/bootstrap/fileinput/cropper.min.css" rel="stylesheet">
    <link href="/static/plugin/bootstrap/fileinput/sitelogo.css" rel="stylesheet">
    <script src="/static/plugin/bootstrap/fileinput/cropper.min.js"></script>
    <script src="/static/plugin/bootstrap/fileinput/sitelogo.js"></script>
    <script src="/static/plugin/bootstrap/js/bootstrap.min.js"></script>
    
	<script type="text/javascript" src="/static/js/ui/jquery-ui.js"></script>
<%-- 
	<script type="text/javascript" src="<%=path %>/static/js/ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="<%=path %>/static/js/ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="<%=path %>/static/js/ui/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="<%=path %>/static/js/ui/jquery.ui.sortable.js"></script> --%>

<!--[if lt IE 9]>
<script src="js/modernizr.js"></script>
<![endif]-->


<style type="text/css">
.topnav ul {
	margin: 0px;
}

span.keywordHighLight{
	color : red;
}

.navbor li ul li {
	margin-left : 0px !important;
}

input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: #aab2bd;
    /* placeholder字体大小  */
    font-size: 13px;
    /* placeholder位置  */
    text-align: left;
}

td.tdLeft{
    padding : 20px;
    text-align : right;
    width : 200px;
}
td.tdRight{
    padding : 20px;
    width : 600px;
}

div.listArticles{
    line-height : 25px;
}

div.divTitle1{
    margin-left : 20px;
    line-height : 33px;
}

div.articleForAlbumDisabled{
    background-color : #efefef;
    cursor : default;
    color : gray;
}
div.articleForAlbum{
    line-height: 40px;
    padding-left : 15px;
    margin-bottom : 2px;
}
div.articleForAlbumAble{
    cursor : pointer;
}
div.articleForAlbumAble:hover{
    background-color : #eeeeee;
}
.closeSelected:hover{
    color : red;
    cursor : default;
}
.closeSelected {
    color : gray;
}

.article-item{
    height : 30px;
    line-height : 40px;
    margin-top : 2px;
}
.article-item-place{
    height : 30px;
    background-color : rgb(249, 212, 182);
}
</style>

	<script type="text/javascript">
	   var defaults = {
		        blockStyle:{
		            color:'black',          //遮罩层默认颜色
		            opacity: 0.2,              //遮罩层默认透明度（0：透明，1：不透明）
		            over : false
		        },
		        closeable: false,             //点击遮罩层是否可关闭弹出层，true:可关闭，false:不可关闭
		        fadeTime:0,                 //弹出层渐变时间
		        marginTop:-1,               //弹出层距离顶部高度，默认居中
		        single:false,               //是否只显示一个浮层；true：此浮层只会单独显示，显示时隐藏其他浮层
		        scroll:false,               //浮层是否和页面一起滚动；true：浮层随页面一起滚动，false：浮层固定
		        blockView:true              //是否显示遮罩层；true：显示（默认）
		    };
	function cancelSelect() {
		$('#selectArticlesBlock').hidePop();
	}
    
    //获取已选择：selected_article
    var selectedMap = {};
	function showSelectBlock() {
		//每次点击，清空
        selectedMap = {};
        $('#selectArticlesBlock').showPop(defaults);
        
        $('#selectArticlesBlock_list').html('<div style="padding : 10px;">文章加载中...</div>');

        $('div.selected_article').each(function() {
        	var ot = $(this);
        	selectedMap[ot.find('.selected_id').val()] = ot.find('.selected_title').val();
        });
        
        console.log(selectedMap);
        //清空已选择，重新初始化
        $('#selectedArticlesDiv').html('');
        for(var id in selectedMap) {
        	appendArticleToHTML(id, selectedMap[id]);
        }
        
        jQuery.ajax({
        	url : '/article/listarticles?pageSize=50',
        	type : 'get',
        	success : function(rs) {
        	    var h = '';
        	    
        	    var list = rs.list;
        	    for(var i = 0, len = list.length; i < len; i ++) {
        	    	var article = list[i];
        	    	var id = article.id;
        	    	
        	    	if(selectedMap[id]) { //不能点击
                        h += '<div id="' + id + '" class="articleForAlbum articleForAlbumDisabled" onclick="selectArticle(this, \'' + id + '\', \'' + article.title + '\')">';
        	    	} else {
                        h += '<div id="' + id + '" class="articleForAlbum articleForAlbumAble" onclick="selectArticle(this, \'' + id + '\', \'' + article.title + '\')">';
        	    	} 
        	    	h += '    <div>' + article.title + '</div>';
        	    	h += '</div>';
        	    }
        	    
        	    $('#selectArticlesBlock_list').html(h);
        	}
        });
	}
	//关联html
	function appendArticleToHTML(id, title) {
		var h = '';
		h += '<div class="articleForAlbum articleForAlbumAble" onclick="cancelArticle(this, \'' + id + '\', \'' + title + '\');" >';
		h += '' + title;
		h += '<div>';
		$('#selectedArticlesDiv').append(h);
		//记录已选择的
		selectedMap[id] = title;
	}
	//点击确认，重新生成列表
	function confirmSelected() {
		var h = '';
		for(var id in selectedMap) {
			var title = selectedMap[id];
			if(title && title.length > 2) {
	            h += '<div class="listArticles">';
	            h += '<a target="_blank" href="/articledetail?atclid=' + id + '">' + title + '</a>';
	            h += '</div>';
	            h += '<div id="selected_' + id + '" class="selected_article">';
	            h += '    <input type="hidden" value="' + title + '" class="selected_title" />';
	            h += '       <input type="hidden" value="' + id + '" name="links" class="selected_id" />';
	            h += '    </div>';
			}

		}
		$('#relativeArticlesDiv').html(h);
		//隐藏浮层；这里方法命名应该嵌套一层与业务动作无关，hideSelectedBlock
		cancelSelect();
	}
	
	//选择关联
	function selectArticle(thisObj, id, title) {
		if(selectedMap[id]) {
			return;
		}
		appendArticleToHTML(id, title);
		
		//切换样式
		$(thisObj).removeClass('articleForAlbumAble');
		$(thisObj).addClass('articleForAlbumDisabled');
	}
    //取消关联
    function cancelArticle(thisObj, id, title) {
        $(thisObj).remove();
        $('#selected_' + id).remove();
        var target = $('#' + id);
        selectedMap[id] = null;//移除已选择
        
        //切换目标样式
        target.removeClass('articleForAlbumDisabled');
        target.addClass('articleForAlbumAble');
    }
	
	$(function() {
		//showSelectBlock();
		
		initSort();
	});
	
	var IMAGE_RATE = 7 / 10;
	
	function jumpPage(n) {
		var form = $('#searchform');
		form.find('input[name="pageNo"]').val(n);
		form.submit();
	}
	

    function afterUploadImage(resp) {
        console.log(resp);
        if(resp && resp.success && resp.data) {
            var url = resp.data.imageFullUrl;
            console.log(url);
            
            changeLogo(url);
        }
    }
    
    function changeLogo(url) {
    	$('#albumLogo').attr('src', url);
    	$('#albumLogoHidden').val(url);
    }
    
    function checkForm() {
    	var name = $('#albumName').val();
    	if(name == null || name.length < 5 || name.length > 40) {
    		messageDiv('专辑标题为必填项，长度在5~40之间！');
    		return false;
    	}
    	
    	var info = $('#info').val();
        if(info == null || info.length < 10 || info.length > 200) {
            messageDiv('专辑简介为必填项，长度在10~200之间！');
            return false;
        }
        
        var logo = $('#albumLogoHidden').val();
        if(logo == null || logo.length < 10) {
            messageDiv('请为专辑选择一张封面图片！');
        	return false;
        }
        
        var links  = $('input[name="links"]');
        if(links.length < 2) {
            messageDiv('至少为专辑关联两篇文章！');
            return false;
        }
    	
    	return true;
    }
    

    function messageDiv(msg) {
        var obj = $('#messageDiv');
        obj.find('.msg_div').html(msg);
        var left = ($(document).width() - obj.width())/2;
        obj.css({
            position : 'fixed',
            //opacity : 1,
            left : left + 'px',
            top : '230px'
        });
        
        obj.stop(true).fadeIn(0, function() {
            obj.delay(2000).fadeOut(444);
        });
    }
    
    function initSort() {

        $("#relativeArticlesDiv").sortable({
            //axis: "y",
            placeholder: "article-item-place"
            });
        $("#relativeArticlesDiv").disableSelection(); 
    }
	</script>
</head>

<body>
	<header>
		<div class="tophead">
			<div class="logo">
				<a href="/home"><img src="/static/img/logo_nav.png" width="225" height="50" /></a>
			</div>
			<nav class="topnav" id="topnav">
				<ul>
					<li><a href="/article/index">管理文章</a></li>
					<li><a href="/article/album" id="topnav_current">管理专辑</a></li>
					<li><a href="/article/publish">发布文章</a></li>
				</ul>
			</nav>
		</div>
	</header>
    <div class="header-blank">
    </div>
	
<article>

        <div>
            <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content" style="
                        margin-top: 121px;
                    ">
                        <!-- 上传图片地址 -->
                        <form class="avatar-form" action="/article/uploadImage" enctype="multipart/form-data" method="post">
                            <div class="modal-header">
                                <button class="close" data-dismiss="modal" type="button">&times;</button>
                                <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                            </div>
                            <div class="modal-body">
                                <div class="avatar-body">
                                    <div class="avatar-upload">
                                        <input class="avatar-src" name="avatar_src" type="hidden">
                                        <input class="avatar-data" name="avatar_data" type="hidden">
                                        <label for="avatarInput">图片上传</label>
                                        <input class="avatar-input" id="avatarInput" name="avatarfile" type="file"></div>
                                    <div class="row">
                                        <div class="col-md-9">
                                            <div class="avatar-wrapper"></div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="avatar-preview preview-lg"></div>
                                            <div class="avatar-preview preview-md"></div>
                                            <div class="avatar-preview preview-sm"></div>
                                        </div>
                                    </div>
                                    <div class="row avatar-btns">
                                        <div class="col-md-9">
                                            <div class="btn-group">
                                                <button class="btn" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"><i class="fa fa-undo"></i> 向左旋转</button>
                                            </div>
                                            <div class="btn-group">
                                                <button class="btn" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"><i class="fa fa-repeat"></i> 向右旋转</button>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <button class="btn btn-success btn-block avatar-save" type="submit"><i class="fa fa-save"></i> 保存修改</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
        </div>
        <img src="/static/img/upimage.png" id="hiddenImg" style="display : none;" width="20" height="20" />
        <!-- 图片上传 -->

    <div style="">
        <form action="/article/upsertAlbum" method="post" onsubmit="return checkForm();">
            <div style="color : black; font-size : 22px; border-bottom : 1px solid #DDDDDD;">
            <c:choose>
                <c:when test="${not empty album && not empty album.id }">
                    更新专辑信息
                    <input type="hidden" name="albumId" value="${album.id }" />
                </c:when>
	            <c:otherwise>
	                创建新的文章专辑
	            </c:otherwise>
            </c:choose>
            </div>
            <br />
            <br />
            <table style="width : 100%;">
                <tr>
                    <td class="tdLeft">
                        <div>
                            <span class="fieldMust">*</span>标题：
                        </div>
                    </td>
                    <td class="tdRight">
                        <div>
                            <input type="text" name="albumName" value="<c:out value="${album.title }"></c:out>" placeholder="输入专辑名称" style="
                            width : 500px; font-weight : bold;" class="inputStyle2" id="albumName" />
                        </div>
                    </td>
                    <!-- logo -->
                    <td rowspan="3" style="border : 0px solid red;">
                        <div id="crop-avatar" style="width : 245px; height : 350px; background-color : #DDDDDD;">
                            <a class="avatar-view1" href="javascript:void(0);" >
                                <img src="${album.logo }" id="albumLogo" width="245" height="350" />
                                <input type="hidden" value="${album.logo }" name="logo" id="albumLogoHidden" />
                            </a>
                        </div>
                    </td>
                </tr>
                
                <tr>
                    <td class="tdLeft" valign="top">
                        <div>
                            <span class="fieldMust">*</span>简介：
                        </div>
                    </td>
                    <td class="tdRight" valign="top">
                        <div>
                            <textarea id="info" name="info" cols="40" rows="5" style="padding : 10px; font-size : 15px; font-weight : normal;
            outline : none;
            resize : none;
            height : 110px;
            width : 500px;
            border : 1px solid #DDDDDD;"><c:out value="${album.info }"></c:out></textarea>
                        </div>
                    </td>
                </tr>
                
                <tr>
                    <td class="tdLeft" valign="top">
                        <div>
                            <span class="fieldMust">*</span>关联文章：
                        </div>
                    </td>
                    <td class="tdRight">
                        <div id="relativeArticlesDiv">
                        <c:if test="${not empty album.articles}">
                            <c:forEach var="article" items="${album.articles}" varStatus="status">
                            <div class="article-item">
	                            <div class="listArticles">
	                                <a target="_blank" href="/articledetail?atclid=${article.articleId }">${article.articleTitle }</a>
	                            </div>
	                            <div id="selected_${article.articleId }" class="selected_article">
		                            <input type="hidden" value="${article.articleTitle }" class="selected_title" />
		                            <input type="hidden" value="${article.articleId }" name="links" class="selected_id" />
	                            </div>
	                        </div>
                            </c:forEach>
                        </c:if>
                        </div>
                        <div style="padding-top : 10px;">
                            <a class="a_create" href="javascript:void(0);" onclick="showSelectBlock();">关联文章</a>
                        </div>
                    </td>
                </tr>
                
            </table>
            
            <div style="padding-left : 220px; padding-top : 60px;">
                <input type="submit" value="确认发布" class="btnStyle1" />
            </div>
        </form>
    </div>

    
    <div class="alert alert-warning" style="display :none ; position : fixed; width : auto;" id="messageDiv">
        <div class="msg_div" style="width : 400px;">
            <strong>警告！</strong>您的网络连接有问题。
        </div>
    </div>
    
    <div id="selectArticlesBlock" style="width : 1100px; height : 600px; background-color : white; padding : 0px; display : none;
        box-shadow : 1px 1px 33px gray; border-radius : 3px; color : black;
    ">
        <div id="selectArticlesBlock_status" style="border-bottom : 1px solid #cccccc; background-color : #dddddd; line-height : 40px; font-weight : bold;
            padding-left : 15px; padding-right : 15px;
        ">关联专辑文章
            <span class="closeSelected" style="float : right;" onclick="cancelSelect();">X</span>
        </div>
        <table style="width : 100%;">
            <tr>
                <td>
                    <div class="divTitle1">已关联文章</div>
                </td>
                <td>
                    <div class="divTitle1">全部文章</div>
                </td>
            </tr>
            <tr>
                <td valign="top" width="500px;">
                    <div>
	                    <div id="selectedArticlesDiv" style="padding : 10px;">
	                        
	                    </div>
                    </div>
                </td>
                <td valign="top">
			        <div style="padding : 10px; height : 460px; overflow : auto; padding-left : 20px;">
			            <div id="selectArticlesBlock_list" >
			            </div>
			        </div>
                </td>
            </tr>
        </table>
        <div style="padding-left : 40px; padding-top : 15px;">
            <input type="button" class="btnStyle1" value="确定" onclick="confirmSelected();" style=" height : 20px; padding : 5px 10px 5px 10px; font-size : 14px;" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" onclick="cancelSelect();">取消</a>
        </div>
    </div>
</article>



</body>
</html>